Mixin

是class或是id selector混和一起，

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

#border {
  border-top: 1px solid #000;
  border-left: 2px solid #0000ff;
}

header {
  background-color: #ac0000;
  color: #00ac00;
  .flexCenter();
  #border();
}

經過compile之後：

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
#border {
  border-top: 1px solid #000;
  border-left: 2px solid #0000ff;
}
header {
  background-color: #ac0000;
  color: #00ac00;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #000;
  border-left: 2px solid #0000ff;
}

其實可以節省掉不少時間寫相同的code

Not Outputting the Mixin

如果在selector加上() ：selector()
可以在寫Less的時候使用，並且不會被compile為css。

.flexCenter() {
  display: flex;
  justify-content: center;
  align-items: center;
}

#border() {
  border-top: 1px solid #000;
  border-left: 2px solid #0000ff;
}

header {
  background-color: #ac0000;
  color: #00ac00;
  .flexCenter();
  #border();
}

經過compile之後：

header {
  background-color: #ac0000;
  color: #00ac00;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #000;
  border-left: 2px solid #0000ff;
}

Selectors in Mixins & The !important keyword

除了可以mixin properties，也可以mixin selector；
另外可以使用 !important 讓mixin內所有property都能加上!important。

.flexCenter() {
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    border: 1px solid #ff0000;
  }
}

#border() {
  border-top: 1px solid #000;
  border-left: 2px solid #0000ff;
}

header {  
  .flexCenter(); 
  #border() !important;
}

經過compile之後：

header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #000 !important;
  border-left: 2px solid #0000ff !important;
}
header:hover {
  border: 1px solid #ff0000;
}

Parametric Mixins

Mixin也可以接受參數

.color(@color) {
  color: @color;
  background-color: @color;
  border: 1px solid @color;
}


header {  
  .color(#ff00ff);
}

footer {
  .color(#ffff00);
}

經過compile之後：

header {
  color: #ff00ff;
  background-color: #ff00ff;
  border: 1px solid #ff00ff;
}
footer {
  color: #ffff00;
  background-color: #ffff00;
  border: 1px solid #ffff00;
}

Nesting

Nesting是我最喜歡的功能，
跟HTML的結構很相似，
可以很容易找到要修改的地方在哪裡。

header {  
  width: 100%;  
  height: 50px;
  .logo {
    width: 100px;
    height: 50px;
    
    &:hover {
      cursor: pointer;
    }

    &:after {
      content: 'logo';
    }
  }
}

經過compile之後：

header {
  width: 100%;
  height: 50px;
}
header .logo {
  width: 100px;
  height: 50px;
}
header .logo:hover {
  cursor: pointer;
}
header .logo:after {
  content: 'logo';
}